<template>
  <div>
    <van-nav-bar title="编辑地址" left-text="返回" left-arrow @click-left="goback"/>
    <van-address-edit
            style="background-color: #fff;"
            :areaList="areaList"
            :addressInfo="addressInfo"
            show-set-default
            show-delete
            @save="onSave"
            @delete="onDelete"
    />
  </div>
</template>

<script>
  import {AddressEdit, NavBar} from 'vant';
  import areaList from './area.json';
  import {addressDelete, addressDetail, addressSave} from '@/api/api';
  import {removeLocalStorage} from '@/utils/local-storage';

  export default {
    name: 'address-edit',

    data() {
      return {
        areaList,
        addressId: 0,
        addressInfo: {}
      };
    },
    created() {
      this.addressId = this.$route.query.addressId;
      if (this.addressId !== -1 && this.addressId !== 0) {
        this.init();
      }
    },

    methods: {
      init() {
        addressDetail({id: this.addressId}).then(res => {
          this.addressInfo = res.data.data;
        });
      },
      onSave(content) {
        addressSave(content).then(res => {
          this.$toast('成功');
          this.$router.go(-1);
        });
      },
      onDelete(content) {
        addressDelete({id: content.id});
        removeLocalStorage('AddressId');
        this.$router.go(-1);
      },
      goback() {
        this.$router.go(-1);
      }
    },

    components: {
      [NavBar.name]: NavBar,
      [AddressEdit.name]: AddressEdit
    }
  };
</script>
